<template>
	<view class="index-container">
		<view class="titleStyPOs" >
			<div style="height:30rpx;"></div>
			<view :style="{height: statusBarHeight + 'px'}"></view>
			<div class="header">
				<div class="back flex-start ml-30 mr-30" @click="back">
					<image src="../../../static/icon/back.png" mode="widthFix" class="w-20 h-30"></image>
				</div>
				<u-search :placeholder="$t('请搜索')" :showAction="false" :animation="false" bgColor="#fff" v-model="keyword"
					class="searchSty" @search="goFilter" :height="78"></u-search>
					<view class="flex-start flex-start">
						<!-- <image src="../../../static/icon/positionIcon (2).png" mode="" class="w-22 h-22"></image> -->
						<view class="transport">
							<view class="transport_name">
								<city :is_all="true"  :value="paramsList.city_name" class="w-full" @change="e => {
								paramsList.city_name = e.column2.value == -1 || e.column3.value == -1 ?
								[e.column1.label, e.column2.label.replace('全部', ''), e.column3.label.replace('全部', '')].filter(item => item).join(',') :
								e.column3.label;
								 paramsList.city_id = [e.column1.value, e.column2.value, e.column3.value].join(',');
								  }">
								   <div :class="{ 'font-bold': paramsList.city_name, add_hidden: true}">
									<!-- {{ paramsList.city_name || $t('请选择') }} -->
 										{{ paramsList[plang('city_name')] || $t('请选择') }}

								 </div>
								</city>
							</view>
							<u-icon v-if="paramsList.city_id" name="close" color="#8C8C8C" size="24rpx" @click="delAddress" ></u-icon>
							<u-icon name="arrow-down" color="#8C8C8C" size="24rpx"></u-icon>
						</view>
					</view>
			</div>
			<tipSl :text="$t('【重要提示】交易前请核实服务方资质与评价！警惕超低价/夸大宣传，遇欺诈速联系平台举报，我们全力配合保障您的权益！')" style="margin: 0;background-color: transparent;"></tipSl>
			<div class="list-title w-full">
				<scroll-view scroll-x>
					<view class="scrolxxx">
						<view v-for="item in list" class="commonTitle" :class="{active: item.id==current}" @click="sectionChange(item.id)">
							{{ item[plang('name')]}}
						</view>
					</view>
				</scroll-view>
			</div>
		</view>
		<view :style="`height: calc(${statusBarHeight}px + 285rpx)`"></view>

		<view class="ml-24" style="display: flex;flex-wrap: wrap;justify-content: space-between;padding-right: 25rpx;">
			<view class="mt-15" v-for="(item, index) in liveList" @click="goDetail(item)" >
				<view  class="liveBox mt-20">
					<image :src="getImageUrl((item.images && item.images.length > 0 && item.images[0]))" mode="aspectFill" class="infoImageSty"></image>
					<view class="bg-white liveInfoBox">
						<p class="text-010 fz28 pt-5 ml-24 font-bold">{{item[plang('title')]}}</p>
						<view class="between ml-15 mr-15 pb-15">
							<view class="mt-15">
								<span class="priceSty" v-if="item.price"> <span class="fz20">{{item.price_unit}}</span>{{item.price}}</span>
							</view>
							<view class="flex">
								<view class="mt-15">
									<image src="../../../static/icon/commentIcon.png" mode="widthFix" class="w-20 h-20 vam"></image>
									<span class="fz22 text-888 ml-10">{{item.comment_count}}</span>
								</view>
								<view class="mt-15 ml-20">
									<image src="../../../static/icon/seeSeeIcon.png" mode="" class="w-20 h-20 vam"></image>
									<span class="fz22 text-888 ml-10">{{item.num}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		
		</view>

			 
		<view class="h-30"></view>
		<div v-if="nomore" class="center text-gray-500 fz24 pt-20 pb-20">{{$t('没有更多了')}}</div>
		
		<view class="releaseBox" @click="sendAdvertising">
			 <image src="../../../static/icon/releaseIcon.png" mode="" class="w-40 h-40"></image>
			 <p class="fz22 text-white mt-10">{{$t('发布')}}</p>
		</view>
		
		<!-- <div v-if="nomore" class="center text-gray-500 fz24 pt-20 pb-20">没有更多了</div>
		<view class="h-50"></view> -->
	</view>
</template>

<script>
	import { getCateLife, getLifeadList } from '@/api/basic'
	import citySelect from "./components/citySelect.vue"
	export default {
		components: {
			citySelect
		},
		data() {
			return {
				list: [],
				current: '',
				keyword: '',
				statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
				IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
				nomore: false,
				paramsList:{
					category_id: '',
					city_id: '',
					city_name: '',
					page: 1,
					limit: 10,
					searchKey: ''
				},
				liveList: [],
			}
		},
		watch: {
			'paramsList.city_id': {
				handler(val) {
					console.log(this.paramsList.city_id)
					this.getLifeadList(true)
				},
			}
		},
		  created() {
			// 刷新页面
				if (this.paramsList.category_id) {
					window.onNativeShow = this.getLifeadList
				}
		  },
		mounted() {
			this.getCateLife()
		},
		methods: {
			goFilter(e) {
				console.log('777777', e)
				this.paramsList.searchKey = e
				console.log('0===1-10', this.paramsList.searchKey)
				this.getLifeadList(true)
			},
			delAddress() {
				this.paramsList.city_id = ''
				this.paramsList.city_name = ''
				this.getLifeadList(true)
			},
			sectionChange(index) { 
				this.current = index
				this.paramsList.category_id = index
				this.liveList = [];
				this.getLifeadList(true)
			},
			back() {
				uni.navigateBack()
				// uni.navigateTo({
				// 	url:'/pages/app/index',
				// 	webview: 'zWebView',
				// })
			},
			goDetail(item) {
				uni.setStorageSync('lifeDetail',item)
				uni.navigateTo({
					// url: `/pages/tabbar/lifeAdvertising/lifeDetail?item=${JSON.stringify(item)}`
					 url: `/pages/tabbar/lifeAdvertising/lifeDetail`
				})
			},
			getCateLife() {
				getCateLife().then(res => {
					this.list = res.data.data || []
					this.current = this.list[0].id
					this.paramsList.category_id = this.current;
					this.getLifeadList(true)
				})
			},
			//下拉刷新
			onPullDownRefresh() {
				this.getLifeadList(true)
			},
			//上拉加载
			onReachBottom() {
				this.paramsList.page++
				this.getLifeadList()
			},
			getLifeadList(init) {
			
				if (init) {
					this.paramsList.page = 1
					this.nomore = false;
				}
				if (this.nomore) {
					return;
				}
				uni.showLoading({
					title: 'loading',
					mask: true
				})
			
				console.log('8888888', this.paramsList)
				getLifeadList({...this.paramsList,location_city: this.paramsList.city_id,city_id: ''}).then(res => {
					if (this.paramsList.page == 1) {
						this.liveList = res.data.data
					} else {
						this.liveList = [...this.liveList, ...res.data.data]
					}
					//当前请求的{{$t('列表')}}{{$t('是')}}空的 那就{{$t('是')}}没有更多了
					if (res.data.data.length == 0) {
						this.nomore = true;
					}
					uni.hideLoading()
					// 结束下拉刷新
					uni.stopPullDownRefresh()
				}).catch(err => {
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
			},
			sendAdvertising() {
				console.log('7777777777')
				uni.navigateTo({
					url: '/pages/tabbar/lifeAdvertising/sendAdvert'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/appScss.scss';
	// .index-container {
	// 	width: 100%;
	// 	height: 100%;
	// 	background: #F6F7FB url("/static/backcolorImg.png") no-repeat top / 100%;
	// 	position: relative;
	// 	// position: fixed;
	// 	// z-index: 60;
	// }
	.index-container {
		height: 100vh;
	}
	.titleStyPOs {
		background: #F6F7FB url("/static/backcolorImg.png") no-repeat top / 100%;
		position: fixed;
		width: 100%;
		z-index: 10;
	}
	.liveBoxLeft {
		width: 50%;
		.infoImageSty {
			width: 340rpx;
			height: 400rpx;
			border-radius: 18rpx;
		}
		.liveInfoBox {
			width: 340rpx;
			min-height: 100rpx;
			border-radius: 0 0 18rpx 18rpx;
		}
	}
	.priceSty {
		color: #FF7000;
		font-size: 30rpx;
		margin-left: 16rpx;
		margin-top: 20rpx;
	}
	.liveBox {
		.infoImageSty {
			width: 340rpx;
			height: 400rpx;
			border-radius: 18rpx;
		}
		.liveInfoBox {
			width: 340rpx;
			min-height: 100rpx;
			border-radius: 0 0 18rpx 18rpx;
		}
	}
	
	.header {
		font-size: 34rpx;
		font-weight: bold;
		position: relative;
		display: flex;
		align-items: center;
	}
	.transport {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		flex: 1;
		margin: 0 16rpx;
		.transport_name {
			white-space: wrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 200rpx;
			color: #0e0e0e;
			font-size: 22rpx;
			margin-right: 8rpx;
		}
	}
	
	.list-title {
		.scrolxxx {
			display: flex;
			padding: 26rpx 0;
			padding-top: 0;
		}
		.commonTitle {
			height: 46rpx;
			flex: 0 0 auto;
			// width: 120rpx;
			font-size: 28rpx;
			color: #535353;
			margin-left: 25rpx;
		}
	
		.active {
			font-size: 28rpx;
			color: #278AFF;
			font-weight: 600;
			&::after {
				content: '';
				display: block;
				width: 50rpx;
				height: 4rpx;
				background: #278AFF;
				margin: 0 auto;
				margin-top: 3rpx;
			}
		}
	}
	.btnSty {
		height: 68rpx;
		// width: 98%;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		font-family: PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		line-height: 68rpx;
		letter-spacing: 0px;
		color: #fff;
		text-align: center;
		border-radius: 500rpx;
		margin: 30rpx 24rpx 0;
	}
	.boxInfoSty {
		margin-left: 24rpx;
		margin-right: 24rpx;
		min-height: 132rpx;
		border-bottom: 1rpx solid #E3E3E3;
	} 
	.titleSty {
		font-family: PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		letter-spacing: 0px;
		color: #000;
		height: 26rpx;
		width: 130rpx;
		text-align: center;
		line-height: 26rpx;
		border-left: 4rpx solid #278AFF;
	}
	.releaseBox {
		width: 156rpx;
		height: 156rpx;
		border-radius: 500rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		box-shadow: 0rpx 4rpx 13.8rpx 0rpx #DEE1EF;
		box-shadow: -2rpx -6rpx 9.9rpx 0rpx #71D0FF inset;
		box-shadow: -4rpx 5rpx 6.5rpx 0rpx #C8FBFF75 inset;
		position: fixed;
		z-index: 10;
		right: 40rpx;
		bottom: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.add_hidden{
		white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
	font-size: 26rpx;
	color:#8c8c8c !important; max-width:auto
	}

</style>
